<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head>
<title>Bind Element Element</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<meta name="generator" content="Org-mode"/>
<meta name="generated" content="2010-11-22 10:50:12 EST"/>
<meta name="author" content="Rusty Klophaus (@rklophaus)"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<style type="text/css">
 <!--/*--><![CDATA[/*><!--*/
  html { font-family: Times, serif; font-size: 12pt; }
  .title  { text-align: center; }
  .todo   { color: red; }
  .done   { color: green; }
  .tag    { background-color: #add8e6; font-weight:normal }
  .target { }
  .timestamp { color: #bebebe; }
  .timestamp-kwd { color: #5f9ea0; }
  p.verse { margin-left: 3% }
  pre {
	border: 1pt solid #AEBDCC;
	background-color: #F3F5F7;
	padding: 5pt;
	font-family: courier, monospace;
        font-size: 90%;
        overflow:auto;
  }
  table { border-collapse: collapse; }
  td, th { vertical-align: top; }
  dt { font-weight: bold; }
  div.figure { padding: 0.5em; }
  div.figure p { text-align: center; }
  textarea { overflow-x: auto; }
  .linenr { font-size:smaller }
  .code-highlighted {background-color:#ffff00;}
  .org-info-js_info-navigation { border-style:none; }
  #org-info-js_console-label { font-size:10px; font-weight:bold;
                               white-space:nowrap; }
  .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
                                 font-weight:bold; }
  /*]]>*/-->
</style>
<LINK href='../stylesheet.css' rel='stylesheet' type='text/css' />
<script type="text/javascript">
<!--/*--><![CDATA[/*><!--*/
 function CodeHighlightOn(elem, id)
 {
   var target = document.getElementById(id);
   if(null != target) {
     elem.cacheClassElem = elem.className;
     elem.cacheClassTarget = target.className;
     target.className = "code-highlighted";
     elem.className   = "code-highlighted";
   }
 }
 function CodeHighlightOff(elem, id)
 {
   var target = document.getElementById(id);
   if(elem.cacheClassElem)
     elem.className = elem.cacheClassElem;
   if(elem.cacheClassTarget)
     target.className = elem.cacheClassTarget;
 }
/*]]>*///-->
</script>
</head>
<body>
<div id="content">

<h1 class="title">Bind Element Element</h1>

<p><a href="../index.html">Getting Started</a> | <a href="../api.html">API</a> | Elements | <a href="../actions.html">Actions</a> | <a href="../validators.html">Validators</a> | <a href="../handlers.html">Handlers</a> | <a href="../about.html">About</a>
</p>


<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#sec-1">1 Bind Element - #bind {} </a></li>
</ul>
</div>
</div>

<div id="outline-container-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Bind Element - #bind {} </h2>
<div class="outline-text-2" id="text-1">


<p>
The bind element allows you to easily display lists of data on a Nitrogen page. When you declare
the bind element, you define a set of 'data', a 'body' containing one or more elements, and a 'map'
that tells the bind element how to map a data row into the body.
</p>
<p>
A map item is an atom of the form element_id@attribute. The element_id must correspond to the id of
an element in the 'body', and the attribute must be an attribute found on that element. You can bind to
any attribute within an element.
</p>
<p>
In addition, you can specify a 'transform' function to manipulate the data at bind time and add
additional bindings dynamically.
</p>
<p>
The 'data' attribute and the 'map' attribute must follow the same basic structure. This can mean one of three things:
</p>
<dl>
<dt>Simple List</dt><dd>
If the data is a simple list, then each row must
be of the same length, and the map must also be
the same length as a data row.

</dd>
<dt>Value Pair</dt><dd>
If the data is in the form of a key/value pair, then
each row must be a list of {key, value} tuples, and
the map must also be a list of {key, value} tuples.
The tuples can be in any order, and there can be
extra tuples or missing tuples with no ill effects.

</dd>
<dt>Records</dt><dd>
If the data is in the form of a record, then each row
must be the same type of record, and the map must be a
record.  

</dd>
</dl>

<p>The bind element can be nested within itself.
</p>

</div>

<div id="outline-container-1_1" class="outline-3">
<h3 id="sec-1_1"><span class="section-number-3">1.1</span> Usage </h3>
<div class="outline-text-3" id="text-1_1">





<pre class="src src-erlang"><span style="color: #000000;">Data</span> = [
  [<span style="color: #09A240;">"Joe"</span>, <span style="color: #09A240;">"Franklin"</span>],
  [<span style="color: #09A240;">"Samir"</span>, <span style="color: #09A240;">"Jahal"</span>],
  [<span style="color: #09A240;">"Laurie"</span>, <span style="color: #09A240;">"O'Conner"</span>]
],

<span style="color: #000000;">Map</span> = [firstName@text, lastName@text],

#<span style="color: #28439B;">bind</span> { data=<span style="color: #000000;">Data</span>, map=<span style="color: #000000;">Map</span>, body=[
  #<span style="color: #28439B;">label</span> { id=firstName },
  #<span style="color: #28439B;">label</span> { id=lastName }
]}
</pre>



</div>

</div>

<div id="outline-container-1_2" class="outline-3">
<h3 id="sec-1_2"><span class="section-number-3">1.2</span> Attributes </h3>
<div class="outline-text-3" id="text-1_2">


<dl>
<dt>data - (<i>list of erlang terms</i>)</dt><dd>
Data in the form of a simple list, a key/value pair, records, or any combination of the three.

</dd>
<dt>map - (<i>erlang terms</i>)</dt><dd>
Specify how the data maps to the body of elements.

</dd>
<dt>transform - (<i>Function(DataRow, Acc) -&gt; {DataRow1, Acc1, ExtraBindings}</i>)</dt><dd>

<p>
A transform function that is run on the data before binding. DataRow contains 
one row of data. Acc contains the accumulator set by the 'acc' attribute. 
The function can return a modified datarow, an updated accumulator, 
and a list of extra bindings to apply. The extra bindings must be of the
form {element<sub>id</sub>@attr, value}.
</p>
</dd>
<dt>acc - (<i>Erlang term</i>)</dt><dd>
The initial accumulator to pass in to the transform function.

</dd>
<dt>body - (<i>Nitrogen elements</i>)</dt><dd>
The block of Nitrogen elements to which data is bound.

</dd>
<dt>empty_body - (<i>Nitrogen elements</i>)</dt><dd>
A block of Nitrogen elements to render if the supplied data has no rows.
</dd>
</dl>
</div>
</div>
</div>
<div id="postamble">
<p class="author"> Author: Rusty Klophaus (@rklophaus)
</p>
<p class="date"> Date: 2010-11-22 10:50:12 EST</p>
<p class="creator">HTML generated by org-mode 7.01h in emacs 24</p>
</div>
</div>
</body>
</html>
